Search this book | Previous | Table of contents | Next

Using FORMs to get input

This section describes HTML+ FORMs as specialized HTML documents.

A number of script input methods have been enumerated in the previous sections. Namely these methods have made use of an ISINDEX tag, customized URLs using question marks (?) and dollar signs ($), and/or client variables passed from the server to the scripts. Programmers found these methods of input limiting and devised FORMs. FORMs provide programmers with a wider range of input methods as well as the ability to include multiple data entry vehicles in one or more HTML documents.

These data input (or data entry) elements include:

Simple text fields similar to the functionality of ISINDEX tags
Password text fields whose input echoes ambiguous characters for security reasons
Hidden elements eliminating the possibility of data entry
Scrolling text fields
Radio buttons
Check boxes
Pop-up menus
Scrolling lists where one item can be selected
Scrolling lists where more than one item can be selected
Submit buttons whose function is similar to "OK" buttons of Macintosh dialog boxes
Reset buttons which return the data entry elements back to their default values

The data entry elements manifest themselves as extensions to HTML. (Incidentally, with the addition of FORMs to the HTML specification, the HTML specification became loosely known as HTML+.) Using any one or a combination of these elements in your HTML documents, you can get a much wider variety of input for your scripts.

By convention, HTML+ FORMs are preceded and followed by horizontal rulers (<hr>) to set the FORMs off from the rest of the HTML document.

Below is a sample HTML+ FORM:

Text field. (Provides a single line for text input.)

Password field. (Makes input unreadable.):

Text area. (Provides a multi-lined field for input.):
This is a test. This is a test of the Emergency Broadcast System. This is only a test. In case of a real emergency, you would be instructed to contact the nearest WebMaster. This was only a test.

Checkbox buttons. (Multiple items can be selected.):
Apples Pears Bananas

Radio button. (Only one item from the set can be selected.):
Yes No I don't know

Popup menu. (Only one item can be selected.):

Scrolling list #1. (Only one item can be selected.):

Scrolling list #2. (Multiple items can be selected usually using shift- or command-click combinations.):

Hidden attribute. (Not displayed, but contains a value.):

Submit button. (This is like the OK button of dialog boxes.):

Reset button. (Used to return the FORM to its default state.):

In order to generate this sort of data entry document, you will have to enhance your HTML with various FORMs elements. Each one of these elements is described below with examples.

<FORM></FORM>
The <FORM> and </FORM> tags surround the data entry elements described below. They are used to initiate the data entry section of your HTML document. The <FORM> tag requires two attributes: ACTION and METHOD.

ACTION
This attribute declares the URL (either relative or complete) of the script to be executed after the submit button is selected.

METHOD
At the present time, this attribute can be either GET or PUT, and it describes the way the data from your FORM will be encoded before being sent to the server for processing. The GET method was the original method of sending data to WWW servers. Its main limitation is the number of bytes of information it can handle. The limit is 128K. One the other hand, when the GET method is used, the client application will echo the entire URL, complete with search arguments. This is handy if you want to replicate a complicated query sometime in the future. All you have to do is copy the URL from your browser's window and save it for future reference. The PUT method is much more commonly used. It can handle up to 1024K bytes of information in one query, and results in much cleaner but incomplete, URLs. Last, if you use the GET method, the when your FORM is submitted, then the FORMs contents will be encoded and passed to your script as search arguments. If you use the POST method, then the contents of your FORM will be encoded and passed on to your script as path arguments.

Examples:

<FORM ACTION="../scripts/hello-world-06.cgi" METHOD=GET> (More FORMs elements go here.) </FORM>
<FORM ACTION="../scripts/hello-world-06.cgi" METHOD=POST> (More FORMs elements go here.) </FORM>
<FORM ACTION="email.cgi" METHOD=POST> (More FORMs elements go here.) </FORM>

<INPUT>
The INPUT tag is used to declare the existence of any of the following attributes in your FORM.

TYPE
This attribute can be any one of the following values.

TEXT
Creates a simple, single-line text input field.

PASSWORD
Just like TEXT but all letters are unreadable. This is good for passwords and sensitive information.

CHECKBOX
Produces a square button.

RADIO
Produces a small, circular button. All radio buttons defined with the same NAME attribute will work as a group and allow you to only have one selected at a time. A common mistake when using RADIO is the lack of the CHECKED default button.

HIDDEN
This attribute allows you to define variables without letting the end-user change them. This will only work if the end-user does not download your FORM, modify it, and then resubmit it to your script.

SUBMIT
This works like the standard "OK" button in Macintosh-based dialogs. By selecting the SUBMIT button, the contents of the FORM are sent to the script defines by the ACTION attribute of the FORM tag.

RESET
This attribute is used to return the FORM to its original state after the end-user has made some changes.

NAME
This declares, in the programming sense of the word, the existence of a variable. The value created by the FORM will be put into the variable given by the NAME attribute.

VALUE
When used in conjunction with types TEXT and PASSWORD, VALUE is the default value the NAMEed variable will have. VALUE is not required for TEXT and PASSWORD types. VALUE is a required attribute for types CHECKBOX, RADIO, SUBMIT, RESET, and HIDDEN.

SIZE
This is a required attribute when used in conjunction with the TEXT and PASSWORD attributes. It defines the number of characters wide the resulting field will be. The SIZE attribute is meaningless for anything but TEXT and PASSWORD.

MAX
Again, this is a required attribute for the TEXT and PASSWORD attributes. When used in conjunction with the TEXT and PASSWORD attributes, it defines the maximum number of characters that can be entered into the defined field. It makes little sense for the MAX value to be smaller than the SIZE value. The value of MAX can be greater than the value of SIZE.

CHECKED
This is an optional attribute for the RADIO and CHECKBOX input types. If defined, then the resulting button (radio or checkbox) will be selected. By their nature, at least one radio button, in any given set, should be CHECKED. Otherwise, the set of buttons should be checkboxes instead.

Examples:

<INPUT TYPE="text" NAME="textField" VALUE="This is a simple text field" SIZE=65 MAX=65>
<INPUT TYPE="password" NAME="passwordField" VALUE="watermellon" SIZE=65 MAX=65>
<INPUT TYPE="hidden" NAME="hiddenElement" VALUE="Here is the hidden value">
<INPUT TYPE="checkbox" NAME="checkboxButtons" VALUE="bananas">
<INPUT TYPE="checkbox" NAME="checkboxButtons" VALUE="apples" CHECKED>
<INPUT TYPE="radio" NAME="radionButton" VALUE="no">
<INPUT TYPE="radio" NAME="radionButton" VALUE="yes" CHECKED>
<INPUT TYPE="submit" VALUE="OK">
<INPUT TYPE="reset" VALUE="Reset">

<TEXTAREA></TEXTAREA>
This tag is used to create a multi-lined scrolling field. A common misconception is that this field will automatically wrap text enter into it. This is not true and there is nothing you, as a scripter can do about it. To add default text to the scrolling fields defined by TEXTAREA, you must insert your test between the beginning and ending tags. Each one of the following attributes are required in the TEXTAREA tag set.

NAME
This attribute is used to declare the variable that will contain the contents of the TEXTAREA data once it is sent off for execution.

ROWS
This is the number of vertical rows the TEXTAREA field will occupy.

COLS
This is the number of characters wide the field will occupy.

Examples:

<TEXTAREA NAME="textAreaField" ROWS=4 COLS=65>This is a test.</TEXTAREA>
<TEXTAREA NAME="comment" ROWS=2 COLS=40></TEXTAREA>

<SELECT></SELECT>
SELECT is used to create scrolling lists and pop-up menus. Within scrolling lists one or more items can be "selected". Pop-up menus limit the selection to only one item.

NAME
This is the name of the variable that will be used to contain the value of the selected item(s).

SIZE
This is the number of visible selections. If SIZE equals one, then the resulting input element will be a pop-up menu. A value of 1 is the default SIZE when SIZE is not specifically defined. If SIZE is greater than 1, then the resulting input element will be that many rows deep.

MULTIPLE
If included in the SELECT tag, then more than one option can be available for selecting from the list of options. This is usually accomplished on the client end by shift- or command-clicking the items in the resulting field.

OPTION
This is a required parameter. The OPTION tag is used to denote the items appearing in the pop-up menu or scrolling list. To use the OPTION tag you simply proceed the names of each of your items with an <OPTION> and make sure the complete set of options is surrounded by the <SELECT> and </SELECT> tags.

SELECTED
Used within the OPTION parameter, this attribute defines the associated OPTION as a default selection.

Examples:

<SELECT NAME="popUpMenu"><OPTION SELECTED>Geneva<OPTION>Monaco<OPTION>New York<OPTION>Palatino<OPTION>Times</SELECT>
<SELECT NAME="scrollingListOne" SIZE=4><OPTION> 9<OPTION> 10<OPTION SELECTED> 12<OPTION> 14<OPTION> 18<OPTION> 24<OPTION> Other</SELECT>
<SELECT NAME="scrollingListTwo" SIZE=4 MULTIPLE><OPTION SELECTED> Plain<OPTION> Bold<OPTION> Italic<OPTION> Underline<OPTION> Superscript<OPTION> Subscript</SELECT>

Now with the FORM elements defined for you, it is time to see a complete example. Here, in raw HTML, is the FORM used to create the example at the beginning of this section

<HR><FORM ACTION="../scripts/hello-world-06.cgi" METHOD=GET>
Text field. (Provides a single line for text input.)<br><INPUT TYPE="text" NAME="textField" VALUE="This is a simple text field" SIZE=65 MAX=65><p>
Password field. (Makes input unreadable.):<br><INPUT TYPE="password" NAME="passwordField" VALUE="watermellon" SIZE=65 MAX=65><p>
Text area. (Provides a multi-lined field for input.):<br><TEXTAREA NAME="textAreaField" ROWS=4 COLS=65>This is a test.
This is a test of the Emergency Broadcast System.
This is only a test.
In case of a real emergency, you would be instructed to contact the nearest WebMaster.
This was only a test.
</TEXTAREA><p>
Checkbox buttons. (Multiple items can be selected.):<br><INPUT TYPE="checkbox" NAME="checkboxButtons" VALUE="apples" CHECKED> Apples
<INPUT TYPE="checkbox" NAME="checkboxButtons" VALUE="pears" CHECKED> Pears
<INPUT TYPE="checkbox" NAME="checkboxButtons" VALUE="bananas"> Bananas<P>
Radio button. (Only one item from the set can be selected.):<br><INPUT TYPE="radio" NAME="radionButton" VALUE="yes" CHECKED> Yes
<INPUT TYPE="radio" NAME="radionButton" VALUE="no"> No
<INPUT TYPE="radio" NAME="radionButton" VALUE="I don't know"> I don't know<p>
Popup menu. (Only one item can be selected.):<br><SELECT NAME="popUpMenu"><OPTION SELECTED>Geneva
<OPTION>Monaco
<OPTION>New York
<OPTION>Palatino
<OPTION>Times
</SELECT><p>
Scrolling list #1. (Only one item can be selected.):<br><SELECT NAME="scrollingListOne" SIZE=4><OPTION> 9
<OPTION> 10
<OPTION SELECTED> 12
<OPTION> 14
<OPTION> 18
<OPTION> 24
<OPTION> Other
</SELECT><p>
Scrolling list #2. (Multiple items can be selected usually using shift- or command-click combinations.):<br><SELECT NAME="scrollingListTwo" SIZE=4 MULTIPLE><OPTION SELECTED> Plain
<OPTION> Bold
<OPTION> Italic
<OPTION> Underline
<OPTION> Superscript
<OPTION> Subscript
</SELECT><p>
Hidden attribute. (Not displayed, but contains a value.):<br><INPUT TYPE="hidden" NAME="hiddenElement" VALUE="Here is the hidden value"><p>
Submit button. (This is like the OK button of dialog boxes.):<br><INPUT TYPE="submit" VALUE="OK"><p>
Reset button. (Used to return the FORM to its default state.):<br><INPUT TYPE="reset" VALUE="Reset"><p>
</FORM>
<HR>

There are a number of things needing to be stated at this point. First, while the FORMs tags are complicated, they should be available to any HTML editor worth its weight in salt; creating these sorts of tags is not any more complicated than other HTML as long as your editor adequately supports them.

Second, the distinction between the GET and POST methods is subtle. The important thing to remember is that the GET method is limited to 128K bytes of information and ultimately manifests itself as the search arguments in the AppleEvent sent to your script. On the other hand, the POST method can accommodate 1024K of information and manifests itself as the path arguments in the AppleEvent.

To demonstrate the second point, return to the FORM at the beginning of this section. It uses the GET method to send the data to the script. The FORM below uses the same ACTION attribute as the one above (ACTION="../scripts/hello-world-06.cgi"), but since the METHOD is POST, the resulting output of hello-world-06.cgi is different. Notice how the the values of post_args, method, and content_type change.

Search this book | Previous | Table of contents | Next

Eric last edited this page on September 26, 1995. Please feel free to send comments.